"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";
import { FaGoogle } from "react-icons/fa";

export default function SignIn() {
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl") ?? "/";
  const error = searchParams.get("error");

  const handleSignIn = async (provider: string) =&gt; {
    await signIn(provider, { callbackUrl });
  };

  return (
    <div>
      &lt;Card className="w-full max-w-md shadow-lg"&gt;
        &lt;CardHeader className="space-y-1 text-center"&gt;
          &lt;CardTitle className="text-2xl font-bold"&gt;Welcome back&lt;/CardTitle&gt;
          &lt;CardDescription&gt;Sign in to your account to continue&lt;/CardDescription&gt;
          {error && (
            <div>
              <span>
                Authentication error. Please try again.
              </span>
            </div>
          )}
        &lt;/CardHeader&gt;
        &lt;CardContent className="grid gap-4"&gt;
          &lt;Button
            variant="outline"
            className="flex items-center justify-center gap-2"
            onClick={() =&gt; handleSignIn("google")}
          &gt;
            &lt;FaGoogle className="h-4 w-4" /&gt;
            Sign in with Google
          &lt;/Button&gt;
        &lt;/CardContent&gt;
        &lt;CardFooter className="flex flex-col items-center justify-center gap-2"&gt;
          <p>
            By signing in, you agree to our Terms of Service and Privacy Policy.
          </p>
        &lt;/CardFooter&gt;
      &lt;/Card&gt;
    </div>
  );
}
